<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{ margin:0; padding:0; font-size:14px}
        #box{ width:500px; margin:100px auto}
        table,th,td{ border:1px solid #000; border-collapse:collapse}
        td,th{ width:100px; height:30px; padding:10px}
        input[type="text"]{ display:none; height:24px; width:60px; border:1px solid #ccc;}
        tbody tr td:first-child{text-align: center;}
        tfoot td{text-align: right;}
        .editBtn{ color:#666}
        .delBtn{ color:red}
        .okBtn,.cancelBtn{ display:none}
        
        .edit span{ display:none}
        .edit input[type="text"]{ display:inline-block}
        .edit .editBtn,.edit .delBtn{ display:none}
        .edit .okBtn,.edit .cancelBtn{ display:inline}
        </style>
        
</head>
<body>
    <div id="box">
        <table>
            <thead>
                <tr>
                    <th><label>全选：<input type="checkbox" id="allCheck"/></label></th>
                    <th>名称</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>编辑</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox" class="check"/></td>
                    <td><span>张三</span><input type="text"></td>
                    <td><span>18</span><input type="text"></td>
                    <td><span>1</span><input type="text"></td>
                    <td>
                        <a href="javascript:;" class="editBtn">编辑</a>
                        <a href="javascript:;" class="okBtn">确定</a>
                        <a href="javascript:;" class="cancelBtn">取消</a>
                        <a href="javascript:;" class="delBtn">删除</a>
                    </td>
        
                </tr>
                <tr>
                    <td><input type="checkbox" class="check"/></td>
                    <td><span>李四</span><input type="text"></td>
                    <td><span>25</span><input type="text"></td>
                    <td><span>2</span><input type="text"></td>
                    <td><a href="javascript:;" class="editBtn">编辑</a><a href="javascript:;" class="okBtn">确定</a> <a href="javascript:;" class="cancelBtn">取消</a><a href="javascript:;" class="delBtn">删除</a></td>
        
                </tr>
                <tr>
                    <td><input type="checkbox" class="check"/></td>
                    <td><span>小强</span><input type="text"></td>
                    <td><span>22</span><input type="text"></td>
                    <td><span>3</span><input type="text"></td>
                    <td><a href="javascript:;" class="editBtn">编辑</a><a href="javascript:;" class="okBtn">确定</a> <a href="javascript:;" class="cancelBtn">取消</a><a href="javascript:;" class="delBtn">删除</a></td>
        
                </tr>
                <tr>
                    <td><input type="checkbox" class="check"/></td>
                    <td><span>小明</span><input type="text"></td>
                    <td><span>16</span><input type="text"></td>
                    <td><span>4</span><input type="text"></td>
                    <td><a href="javascript:;" class="editBtn">编辑</a><a href="javascript:;" class="okBtn">确定</a> <a href="javascript:;" class="cancelBtn">取消</a><a href="javascript:;" class="delBtn">删除</a></td>
        
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="5">总价：￥<b id="money"></b></td>
                </tr>
            </tfoot>
       </table>
    </div>
     <script>
      //获取页面元素
      var allCheck = document.querySelector('#allCheck')
      var checks = document.querySelectorAll('.check')
      console.log(allCheck)
      console.log(checks)  
      // 找到父级元素
      var tbody = document.querySelector('tbody')
      tbody.onclik = function(e){
          e = e || window.event
          //判断事件源
          var target = e.target || e.srcElement
          //先找到当前行的tr
          var tr = target.parentNode.parentNode
          switch (target.className) {
              case 'editBtn':
              tr.className = 'edit'
              var spans = tr.querySelectorAll('span')
              spans.forEach(function(span){
                span.nextElementSibling.value = span.innerHTML
              })
          }

         
      }
      
     </script>
</body>
</html>